<template lang="pug">
.picture-upload
  <!-- 查看 -->
  template(v-if='isView')
    template(v-for='(img, index) in viewDatas' :key='index')
      el-image.viewPicture(
        v-if='img !== ""',
        :src='img',
        :preview-src-list='viewDatas'
      )
      el-image.viewPicture(v-if='img === ""')
        template(#error)
          .image-slot
            i.el-icon-picture-outline
  <!-- 上传 -->
  el-upload.avatar-uploader(
    v-if='!isView',
    list-type='picture-card',
    element-loading-spinner='el-icon-loading',
    :action='action',
    :headers='headers',
    :show-file-list="!isHead",
    :on-success='handleAvatarSuccess',
    :before-upload='beforeAvatarUpload', 
    :on-remove='handleRemove'  
  )
    template(#default)
      i.el-icon-plus(v-if="!isHead || imageUrl === ''") 
      el-image(v-else-if="imageUrl !== ''&& imageUrl !== null" :src="imageUrl" fit="cover" class="avatar")
    template(#file="{file}")
      el-image.el-upload-list__item-thumbnail(
          :src='file.url',
          :preview-src-list='srcList'
        )
      span(class="el-upload-list__item-actions")
        //- span(class="el-upload-list__item-preview"
        //-     @click="handlePictureCardPreview(file)")
        //-   i(class="el-icon-zoom-in")
        span(
            class="el-upload-list__item-delete"
            @click="handleRemove(file)")
          i(class="el-icon-delete")
    
    
</template>

<script> 
/***
 * isHead:是否头像或上传单张附件，默认否
 * uploadData:上传附件对象
 * isView：是否查看，默认否 
 * viewDatas：当isView为true时，需要传递路径数组用来查看附件 
 */
export default {
  props: {
    uploadData: {
      type: Object,
      default () {
        return {}
      }
    },
    isView: {
      type: Boolean,
       default(){
        return false
      }
    },  
    isHead: {
      type: Boolean,
       default(){
        return false
      }
    }, 
    viewDatas: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      action: "/fileTest",
      headers: {
        FileFolder: true
      },
      imageUrl: '',
      srcList: [], // 点击图片预览的图片路径数组 
    }
  },
  watch: {
    /**
     * 监控上传附件对象是否发生变化
     */
    uploadData: {
      deep: true,
      handler (newVal, oldVal) {
        this.imageUrl = newVal.imageUrl
        this.srcList.push(newVal.imageUrl)
      }
    }
  },
  // 方法集合
  methods: {
    /**
     * 上传成功，调用父级函数，将上传附件信息赋值给父级组件
     */
    handleAvatarSuccess (res, file) {
      this.$emit('handleAvatarSuccessFun', res, file)
    },
    /**
     * 可由于附件上传前的验证
     */
    beforeAvatarUpload (file) {
      // 此上传允许的附件类型
      const fileType = '.jpg,.jpeg,.png,'
      // 此上传允许的附件大小
      const fileSize = 100
      // 通过此文件的名称获取此文件类型
      const thisFileType = file.name.substr(file.name.lastIndexOf('.'))
      // 然后验证下，这个文件类型是不是允许上传的类型
      const accordType = fileType.includes(thisFileType)
      const accordSize = file.size / 1024 / 1024 < fileSize
      if (!accordType) {
        this.showMsg('', `只能上传 ${fileType} 格式的文件!`)
        return false
      }
      if (!accordSize) {
        this.showMsg('', `上传文件大小不能超过 ${fileSize}MB`)
        return false
      }
      this.loading = true
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    /**
     * 删除附件
     */
    handleRemove (file, fileList) {
      console.log(file, fileList);
    }
  }
}
</script>
<style lang="scss" scoped>
/*照片上传组件内部样式*/
.picture-upload {
  display: flex;
  flex-wrap: wrap;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-loading-mask {
    width: 178px;
    height: 178px;
  }

  .el-icon-loading {
    font-size: 35px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar-uploader {
    // width: 148px;
    height: 148px;
  }
  .avatar{ 
        width: 100%;
        height: 100%; 
  }
 
}
.el-upload--picture-card {
  overflow: hidden;
}
.el-upload--picture-card > img {
  max-width: 100%;
}

.viewPicture {
  max-width: 180px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  overflow: hidden;
  min-width: 140px;
  text-align: center;
  height: 140px;
  line-height: 140px;
  color: #999;

  img {
    cursor: pointer;
  }
}
</style>
